import React from 'react';
import Taro from '@tarojs/taro';

import * as T from '../types';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
type IPageProps = T.IProps & T.IPageProps;

import {View, ScrollView, Image, Text} from '@tarojs/components';
import './ListPage.less';
import Blank from '@/pages/common/blank';
import nones from '@/assets/image/none/nones.png';
import upload from '@/assets/image/login/logo.png';
import homeIcon from '@/assets/image/communityService/home.png';
import className from 'classnames';
import {div, toFixed1} from '@/utils/priceFormat';

// @ts-ignore
@connect<Partial<IPageProps>, T.IPageState>(store2Props, actions)
export default class DemandPage extends React.Component<Partial<IPageProps>, T.IPageState> {
  // 使用state值
  constructor(props) {
    super(props);
    this.state = {
      navBarHeight: 0,
      windowHeight: 0,
      refresherTriggered: false,
    };
  }

  componentWillMount() {
    this.getNavHeight();
  }

  getNavHeight() {
    let menuButtonObject = Taro.getMenuButtonBoundingClientRect();
    var sysinfo = Taro.getSystemInfoSync();
    let windowHeight = sysinfo.windowHeight;
    let statusBarHeight = sysinfo.statusBarHeight;
    let menuBottonHeight = menuButtonObject.height;
    let menuBottonTop = menuButtonObject.top;
    let navBarHeight = statusBarHeight + menuBottonHeight + (menuBottonTop - statusBarHeight) * 2;
    this.setState({
      navBarHeight,
      windowHeight,
    });
  }

  _onScrollToLower = () => {
    let {
      main: {page, totalPage},
      actions: {action},
    } = this.props;
    let num = page + 1;
    if (num > totalPage) return;
    this.props.actions.action.commonChange('main.page', num);
    this.props.actions.action.page();
  };

  _onRefresherRefresh = () => {
    const {refresherTriggered} = this.state;
    if (refresherTriggered) return;
    this.setState({
      refresherTriggered: true,
    });
    this.props.actions.action.commonChange('main.page', 1);
    this.props.actions.action.page();
    setTimeout(() => {
      this.setState({
        refresherTriggered: false,
      });
    }, 2000);
  };

  async itemClick(item) {
    Taro.navigateToMiniProgram({
      appId: 'wxde8ac0a21135c07d',
      path: item.couponInfo.miniProgramUrl + '&utmmedium=',
      extraData: {
        foo: 'bar',
      },
      envVersion: 'release',
      success: function (res) {
        console.log('--------------------res');
        console.log(res);
        // 打开成功
      },
    });
  }

  render() {
    let {windowHeight, refresherTriggered} = this.state;
    let {
      main: {List},
      actions: {action},
    } = this.props;
    return (
      <ScrollView
        className="componentDemandPage"
        scrollY
        style={{height: windowHeight - 122.39}}
        onScrollToLower={this._onScrollToLower}
        refresherEnabled={true}
        refresherTriggered={refresherTriggered}
        onRefresherPulling={this._onRefresherRefresh}
      >
        {List && List.length > 0 ? (
          List.map((item, index) => {
            return (
              <View
                className="itemViews"
                onClick={(e) => {
                  e.stopPropagation();
                  this.itemClick(item);
                }}
              >
                <View>
                  <Image className="leftImg" src={item?.dealBaseInfo?.defaultPic || upload} mode="aspectFill" />
                </View>
                <View className="rightBox">
                  <View className="titleBox">
                    <Text className="title">{item?.dealBaseInfo?.dealTitle}</Text>
                    <Text className="badge">{item?.dealBaseInfo?.dealType == 1 ? '套' : '券'}</Text>
                  </View>
                  <View className="descBox">
                    <View className="desc">{item?.shopInfo?.address}</View>
                    {item?.shopInfo?.distance > 1000 ? (
                      <View className="km">{toFixed1(div(item?.shopInfo?.distance, 1000))}km</View>
                    ) : (
                      <View className="km">{item?.shopInfo?.distance}m</View>
                    )}
                  </View>
                  <View className="bottomBox">
                    <View className="left">
                      <View className="priceBox">
                        <View className="price">
                          ¥{item?.dealBaseInfo?.realPrice ? div(item?.dealBaseInfo?.realPrice, 100) : '-'}
                        </View>
                        <View className="oldPrice">
                          ¥{item?.dealBaseInfo?.marketPrice ? div(item?.dealBaseInfo?.marketPrice, 100) : '-'}
                        </View>
                      </View>
                      <View className="row">
                        <Image className="logoImg" src={homeIcon} mode="widthFix" />
                        <View className="name">{item?.shopInfo?.shopName}</View>
                      </View>
                    </View>
                    <View className="right">
                      <View
                        className="btn"
                        onClick={(e) => {
                          e.stopPropagation();
                          this.itemClick(item);
                        }}
                      >
                        抢购
                      </View>
                    </View>
                  </View>
                </View>
              </View>
            );
          })
        ) : (
          <Blank
            content="暂未查询到商品信息~"
            img={nones}
            imgStyle={{width: '240rpx'}}
            textStyle={{
              fontSize: '32rpx',
              color: '#999999',
              textAlign: 'center',
              marginTop: '40rpx',
            }}
          />
        )}
      </ScrollView>
    );
  }
}
